<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>甘孜</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/vision.css">
</head>
<body>
    <header id="vision_header">
        <span class="return"><img src="images/return.png" alt="" style="width:20%;"></span>
        <span>全景VR</span>
        <span class="search hide"><img src="images/search_all.png" alt="" style="width:35%;"></span>
    </header>
    <section id="vision_section" style="padding:0 0.8rem 0.8rem;">
        <ul class="VR_list clearfix" id="holy-vr-box">
            <p style='text-align: center;width: 100%;'>加载中...</p>
            <!--<li>-->
                <!--<p>-->
                    <!--<img class="VR_img" src="images/vision_pic.png" alt="">-->
                    <!--<span class="play_img"><img src="images/vision_play.png" alt=""></span>-->
                <!--</p>-->
                <!--<p class="VR_title">圣地理塘风光</p>-->
            <!--</li>-->
        </ul>
        <button class="more j-more hide">查看更多</button>
    </section>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/reqeust.js"></script>
    <script>
        $(function () {
            $(".return").click(function () {
                history.back();
            });
            $(".search").click(function () {
                window.location.href = "search_all.html";
            });

            $(".VR_list li").click(function () {
                window.location.href='video_details.html';
            });
            //新闻列表参数
            //视频列表VIType传：圣洁甘孜传：3，VR 传：1,千里眼传：2
            var _newsParam = {
                VIType:1,
                pageIndex:1,
                pageSize:20
            };

            loadMore();
            //加载更多
            $('.j-more').on('click', function() {
              $(this).html("加载中....");
              loadMore();
            });
            function loadMore(){
                sendByUrl("/VisualInterfaceType",_newsParam,function(res){
                    if(_newsParam.pageIndex == 1){
                        $("#holy-vr-box").html("");
                    }
                    var list = res.data && res.data.length > 0 && res.data|| [];

                    $("#holy-vr-box").append(template("holy-list-temp", {
                        list: list
                    }));
                    if(list.length == _newsParam.pageSize){
                        $(".j-more").html("查看更多").removeClass("hide");
                        _newsParam.pageIndex++;
                    }else{
                        $(".j-more").addClass("hide");
                        //$("#holy-vr-box").append("<p>数据都加载完了~</p>");
                        $("#vision_section").append("<p style='text-align: center;width: 100%;'>数据都加载完了~</p>");}
                });
            }
        })
    </script>
    <!--vr-->
    <script id="holy-list-temp" type="text/html">
        {{each list as item i}}
        <li onclick="javascript:window.location.href='video_details.html?id={{item.id}}'">
            <p>
                <img class="VR_img" src="{{item.img}}" alt="{{item.title}}">
                <span class="play_img"><img src="images/vision_play.png" alt=""></span>
            </p>
            <p class="VR_title">{{item.title}}</p>
        </li>
       {{/each}}
    </script>
</body>
</html>